<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="../css/mui.css">
  <link rel="stylesheet" href="../css/icon-daguanjia.css" />
  <style>
    .ps-content {
      height: 100vh;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .pay-state-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    
    .pay-state {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 85vw;
      height: 45vw;
      border: 1px solid #c6c6c6;
      border-radius: 5px;
    }
    
    .pay-result {
      margin-top: 10px;
    }
    
    .pay-btn {
      flex: 1;
      display: flex;
      align-items: flex-end;
    }
    
    .pay-success {
      padding-bottom: 30vw;
    }
    
    .pay-fail {
      display: flex;
      flex-direction: column;
    }
    
    .pay-fail button {
      width: 50vw;
      margin-bottom: 8vw;
    }
    
    .no-show {
      display: none;
    }
    
    .show {
      display: inline;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">支付中...</h1>
  </header>
  <div class="mui-content ps-content" style="height: 100vh; background-color: #fff;">
    <div class="mui-loading">
      <div class="mui-spinner"></div>
    </div>
  </div>
</body>
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>

<script type="text/javascript">
  // http://fed.cypto.cn/pages/pay_result.html?total_amount=0.01&timestamp=2018-05-12+16%3A55%3A22&sign=OufLdNkObRE2bThvHzM9Guza4oSlGrxbgwtRwav5AuMnC3R09HqxzxmqZZqfDEMxtXkGDU4mgDvPs%2F5wNpxuKFqxWEOi5xTAML%2BLGoZTDQfqm%2BXnHGnqGJU2vu8AcvBWWCNcxlzLBp7oUc1SZeMeML%2FQg8Z7z0hcK1o%2B6s4qYdgNopTJFziANrcY5oNqapduTtm1WedPBlCrHBLrGTNSkE%2FLZeG4qaNgVqgEYlFAM%2FO2j80BDx75aOy2kCnx12bOonpWF7N9WLyCueSUm3StAxg209kP1W5dDd7X9px6SL7Na8B7IkTwz7%2BjQH92UGqb8TqKSg4V6MKOzxs2ipDwGw%3D%3D&trade_no=2018051221001004010564955260&sign_type=RSA2&auth_app_id=2018042560057257&charset=UTF-8&seller_id=2088031974769855&method=alipay.trade.wap.pay.return&app_id=2018042560057257&out_trade_no=20180512163650761&version=1.0

  document.addEventListener('DOMContentLoaded', function() {
    var $ = mui,
      queryParas = {
        auth_app_id: app.getQueryString('auth_app_id'),
        out_trade_no: app.getQueryString('out_trade_no'),
        total_amount: app.getQueryString('total_amount'),
        trade_no: app.getQueryString('trade_no'),
      },
      payResult = ['支付失败', '支付成功'],
      loadingAfter = `<div class="pay-state-wrap"><div class="pay-state no-show success"><span class="mui-icon-extra icon-dgj-chenggong" style="font-size:45px;color:#0199ff"></span><div class="pay-result">支付成功</div></div><div class="pay-state no-show fail"><span class="mui-icon-extra icon-dgj-shibai" style="font-size:45px;color:#0199ff"></span><div class="pay-result">支付失败</div></div></div><div class="pay-btn"><div class="pay-success no-show success"><button type="button" class="mui-btn confirm" style="width:50vw">确定</button></div><div class="pay-fail no-show fail"><button type="button" class="mui-btn againDoPay">重新支付</button> <button type="button" class="mui-btn backHome">返回首页</button></div></div>`;

      setTimeout(function() {
        var test = document.querySelector('.ps-content');
        test.innerHTML = loadingAfter;

        getVerifyOrder(queryParas, payResult);

      }, 3000);

  });

  function getVerifyOrder(queryParas, payResult) {
    var success = document.querySelectorAll('.success'),
      fail = document.querySelectorAll('.fail');

    console.log(queryParas);
    http.getToken({
      url: API.getVerifyOrder,
      data: {
        order_no: queryParas.out_trade_no,
        device_type: app.clientType.versions.android ? 'android' : 'iphone'
      },
      token: 0,
      deviceType: app.clientType.versions.android ? 'android' : 'iphone',
      success: function(res) {
        console.log('res-->>', res);
        var verifyOrder = res.data;

        // if (verifyOrder.amount === queryParas.total_amount &&
        if (verifyOrder.alipay_order_no === queryParas.trade_no &&
          verifyOrder.pay_state === 1) {
          var userInfo = {
            username: verifyOrder.username,
            token: verifyOrder.token
          };
          localStorage.setItem('$state', JSON.stringify(userInfo));
          document.querySelector('.mui-title').innerText = payResult[verifyOrder.pay_state] || '';
          Array.from(success).map(function(value, index) {
            value.classList.remove('no-show');
          });

          document.querySelector('.confirm').addEventListener('tap', function() {
             app.toPage('../index_log.html');
          });
        } else {
          document.querySelector('.mui-title').innerText = payResult[0] || '';
          Array.from(fail).map(function(value, index) {
            value.classList.remove('no-show');
          });
          document.querySelector('.againDoPay').addEventListener('tap', function() {
            app.toPage('pay.html');
          });

          document.querySelector('.backHome').addEventListener('tap', function() {
            app.toPage('../index_log.html');
          });
        }
      },
      error: function(err) {
        console.log('请求失败');
        document.querySelector('.mui-title').innerText = payResult[0] || '';
        Array.from(fail).map(function(value, index) {
          value.classList.remove('no-show');
        });
        document.querySelector('.againDoPay').addEventListener('tap', function() {
          app.toPage('pay.html');
        });

        document.querySelector('.backHome').addEventListener('tap', function() {
          app.toPage('../index_log.html');
          // localStorage.removeItem('$taskInfo');
        });
      }
    });
  }
</script>

</html>